import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button,ButtonToolbar,Dropdown,DropdownButton,MenuItem,SplitButton,Glyphicon,FormControl,Table,Tabs,Tab} from 'react-bootstrap';

class CustomToggle extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(e) {
        e.preventDefault();

        this.props.onClick(e);
    }

    render() {
        return (
            <a href="" onClick={this.handleClick}>
                {this.props.children}
            </a>
        );
    }
}

class CustomMenu extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.onChange = e => this.setState({ value: e.target.value });

        this.state = { value: '' };
    }

    focusNext() {
        const input = ReactDOM.findDOMNode(this.input);

        if (input) {
            input.focus();
        }
    }

    render() {
        const { children } = this.props;
        const { value } = this.state;

        return (
            <div className="dropdown-menu" style={{ padding: '' }}>
                <FormControl
                    ref={c => { this.input = c; }}
                    type="text"
                    placeholder="Type to filter..."
                    onChange={this.onChange}
                    value={this.state.value}
                />
                <ul className="list-unstyled">
                    {React.Children.toArray(children).filter(child => (
                        !value.trim() || child.props.children.indexOf(value) !== -1
                    ))}
                </ul>
            </div>
        );
    }
}


export default class ButtonDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false
        };
    }
    render(){
        const wellStyles = {maxWidth: 800, margin: '0 10px 10px'};
        const BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger', 'Link'];
        let isLoading = this.state.isLoading;
        return (
            <div >

                <div className="well" style={wellStyles}>
                    <ButtonToolbar>{BUTTONS.map((title, i)=> {
                        return (
                            <DropdownButton bsStyle={title.toLowerCase()} title={title} key={i} id={`dropdown-basic-${i}`}>
                                <MenuItem eventKey="1">Action</MenuItem>
                                <MenuItem eventKey="2">Another action</MenuItem>
                                <MenuItem eventKey="3" active>Active Item</MenuItem>
                                <MenuItem divider />
                                <MenuItem eventKey="4">Separated link</MenuItem>
                            </DropdownButton>
                        );
                    })}</ButtonToolbar>
                </div>

                <div className="well" style={wellStyles}>
                    <ButtonToolbar>{BUTTONS.map((title, i)=> {
                        return (
                            <SplitButton bsStyle={title.toLowerCase()} title={title} key={i} id={`dropdown-basic-${i}`}>
                                <MenuItem eventKey="1">Action</MenuItem>
                                <MenuItem eventKey="2">Another action</MenuItem>
                                <MenuItem eventKey="3" active>Active Item</MenuItem>
                                <MenuItem divider />
                                <MenuItem eventKey="4">Separated link</MenuItem>
                            </SplitButton>
                        );
                    })}</ButtonToolbar>
                </div>

                <div className="well" style={wellStyles}>
                    <ButtonToolbar>
                        <DropdownButton bsSize="large" title="Large button" id="dropdown-size-large">
                            <MenuItem eventKey="1">Action</MenuItem>
                            <MenuItem eventKey="2">Another action</MenuItem>
                            <MenuItem eventKey="3">Something else here</MenuItem>
                            <MenuItem divider />
                            <MenuItem eventKey="4">Separated link</MenuItem>
                        </DropdownButton>
                    </ButtonToolbar>

                    <ButtonToolbar>
                        <DropdownButton title="Default button" id="dropdown-size-medium">
                            <MenuItem eventKey="1">Action</MenuItem>
                            <MenuItem eventKey="2">Another action</MenuItem>
                            <MenuItem eventKey="3">Something else here</MenuItem>
                            <MenuItem divider />
                            <MenuItem eventKey="4">Separated link</MenuItem>
                        </DropdownButton>
                    </ButtonToolbar>

                    <ButtonToolbar>
                        <DropdownButton bsSize="small" title="Small button" id="dropdown-size-small">
                            <MenuItem eventKey="1">Action</MenuItem>
                            <MenuItem eventKey="2">Another action</MenuItem>
                            <MenuItem eventKey="3">Something else here</MenuItem>
                            <MenuItem divider />
                            <MenuItem eventKey="4">Separated link</MenuItem>
                        </DropdownButton>
                    </ButtonToolbar>

                    <ButtonToolbar>
                        <DropdownButton bsSize="xsmall" title="Extra small button" id="dropdown-size-extra-small">
                            <MenuItem eventKey="1">Action</MenuItem>
                            <MenuItem eventKey="2">Another action</MenuItem>
                            <MenuItem eventKey="3">Something else here</MenuItem>
                            <MenuItem divider />
                            <MenuItem eventKey="4">Separated link</MenuItem>
                        </DropdownButton>
                    </ButtonToolbar>
                </div>

                <div className="well" style={wellStyles}>
                    <ButtonToolbar>
                        <DropdownButton bsStyle="default" title="No caret" noCaret id="dropdown-no-caret">
                            <MenuItem eventKey="1">Action</MenuItem>
                            <MenuItem eventKey="2">Another action</MenuItem>
                            <MenuItem eventKey="3">Something else here</MenuItem>
                            <MenuItem divider />
                            <MenuItem eventKey="4">Separated link</MenuItem>
                        </DropdownButton>
                    </ButtonToolbar>
                </div>

                <div className="well" style={wellStyles}>
                    <ButtonToolbar>
                        <SplitButton title="Dropup" dropup id="split-button-dropup">
                            <MenuItem eventKey="1">Action</MenuItem>
                            <MenuItem eventKey="2">Another action</MenuItem>
                            <MenuItem eventKey="3">Something else here</MenuItem>
                            <MenuItem divider />
                            <MenuItem eventKey="4">Separated link</MenuItem>
                        </SplitButton>
                    </ButtonToolbar>

                    <ButtonToolbar>
                        <SplitButton bsStyle="primary" title="Right dropup" dropup pullRight id="split-button-dropup-pull-right">
                            <MenuItem eventKey="1">Action</MenuItem>
                            <MenuItem eventKey="2">Another action</MenuItem>
                            <MenuItem eventKey="3">Something else here</MenuItem>
                            <MenuItem divider />
                            <MenuItem eventKey="4">Separated link</MenuItem>
                        </SplitButton>
                    </ButtonToolbar>
                </div>

                <div className="well" style={wellStyles}>
                    <SplitButton title="Dropdown right" pullRight id="split-button-pull-right">
                        <MenuItem eventKey="1">Action</MenuItem>
                        <MenuItem eventKey="2">Another action</MenuItem>
                        <MenuItem eventKey="3">Something else here</MenuItem>
                        <MenuItem divider />
                        <MenuItem eventKey="4">Separated link</MenuItem>
                    </SplitButton>
                </div>

                <div className="well" style={wellStyles}>

                    <ButtonToolbar>
                        <Dropdown id="dropdown-custom-1">
                            <Dropdown.Toggle>
                                <Glyphicon glyph="star" />
                                Pow! Zoom!
                            </Dropdown.Toggle>
                            <Dropdown.Menu className="super-colors">
                                <MenuItem eventKey="1">Action</MenuItem>
                                <MenuItem eventKey="2">Another action</MenuItem>
                                <MenuItem eventKey="3" active>Active Item</MenuItem>
                                <MenuItem divider />
                                <MenuItem eventKey="4">Separated link</MenuItem>
                            </Dropdown.Menu>
                        </Dropdown>

                        <Dropdown id="dropdown-custom-2">
                            <Button bsStyle="info">
                                mix it up style-wise
                            </Button>
                            <Dropdown.Toggle bsStyle="success"/>
                            <Dropdown.Menu className="super-colors">
                                <MenuItem eventKey="1">Action</MenuItem>
                                <MenuItem eventKey="2">Another action</MenuItem>
                                <MenuItem eventKey="3" active>Active Item</MenuItem>
                                <MenuItem divider />
                                <MenuItem eventKey="4">Separated link</MenuItem>
                            </Dropdown.Menu>
                        </Dropdown>

                    </ButtonToolbar>

                </div>
                <div className="well" style={wellStyles}>

                  <Dropdown id="dropdown-custom-menu">
                        <CustomToggle bsRole="toggle">
                            Custom toggle
                        </CustomToggle>

                        <CustomMenu bsRole="menu">
                            <MenuItem eventKey="1">Red</MenuItem>
                            <MenuItem eventKey="2">Blue</MenuItem>
                            <MenuItem eventKey="3" active>Orange</MenuItem>
                            <MenuItem eventKey="1">Red-Orange</MenuItem>
                        </CustomMenu>
                    </Dropdown>
                </div>

                <div className="well" style={wellStyles}>
                    <Tabs>
                    <Tab eventKey={1} title="DropdownButton">
                <Table class="prop-table table table-striped table-bordered" data-reactid="1070">
                        <thead data-reactid="1071">
                        <tr data-reactid="1072">
                            <th data-reactid="1073">Name</th>
                            <th data-reactid="1074">Type</th>
                            <th data-reactid="1075">Default</th>
                            <th data-reactid="1076">Description</th>
                        </tr>
                        </thead>
                        <tbody data-reactid="1077">
                        <tr class="prop-table-row" data-reactid="1078">
                            <td data-reactid="1079">bsSize</td>
                            <td data-reactid="1082">
                                <div data-reactid="1083">
                                    string
                                </div></td>
                            <td data-reactid="1084"></td>
                            <td data-reactid="1085">
                                <div class="prop-desc" data-reactid="1086">
                                    <p>Component size variations.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1087">
                            <td data-reactid="1088">bsStyle</td>
                            <td data-reactid="1091">
                                <div data-reactid="1092">
                                    string
                                </div></td>
                            <td data-reactid="1093"></td>
                            <td data-reactid="1094">
                                <div class="prop-desc" data-reactid="1095">
                                    <p>Component visual or contextual style variants.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1096">
                            <td data-reactid="1097">componentClass</td>
                            <td data-reactid="1100">
                                <div data-reactid="1101">
                                    elementType
                                </div></td>
                            <td data-reactid="1102">ButtonGroup</td>
                            <td data-reactid="1103">
                                <div class="prop-desc" data-reactid="1104">
                                    <p>You can use a custom element type for this component.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1105">
                            <td data-reactid="1106">disabled</td>
                            <td data-reactid="1109">
                                <div data-reactid="1110">
                                    boolean
                                </div></td>
                            <td data-reactid="1111"></td>
                            <td data-reactid="1112">
                                <div class="prop-desc" data-reactid="1113">
                                    <p>Whether or not component is disabled.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1114">
                            <td data-reactid="1115">dropup</td>
                            <td data-reactid="1118">
                                <div data-reactid="1119">
                                    boolean
                                </div></td>
                            <td data-reactid="1120"></td>
                            <td data-reactid="1121">
                                <div class="prop-desc" data-reactid="1122">
                                    <p>The menu will open above the dropdown button, instead of below it.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1123">
                            <td data-reactid="1124">id<span class="label label-default" data-reactid="1127">required</span></td>
                            <td data-reactid="1128">
                                <div data-reactid="1129">
                                    string|number
                                </div></td>
                            <td data-reactid="1130"></td>
                            <td data-reactid="1131">
                                <div class="prop-desc" data-reactid="1132">
                                    <p>An html id attribute, necessary for assistive technologies, such as screen readers.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1133">
                            <td data-reactid="1134">noCaret</td>
                            <td data-reactid="1137">
                                <div data-reactid="1138">
                                    boolean
                                </div></td>
                            <td data-reactid="1139"></td>
                            <td data-reactid="1140">
                                <div class="prop-desc" data-reactid="1141"></div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1142">
                            <td data-reactid="1143">onClose</td>
                            <td data-reactid="1146">
                                <div data-reactid="1147">
                                    function
                                </div></td>
                            <td data-reactid="1148"></td>
                            <td data-reactid="1149">
                                <div class="prop-desc" data-reactid="1150">
                                    <p>A callback fired when the Dropdown closes.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1151">
                            <td data-reactid="1152">onSelect</td>
                            <td data-reactid="1155">
                                <div data-reactid="1156">
                                    function
                                </div></td>
                            <td data-reactid="1157"></td>
                            <td data-reactid="1158">
                                <div class="prop-desc" data-reactid="1159">
                                    <p>A callback fired when a menu item is selected.</p>
                                    <pre><code class="lang-js">(eventKey: any, event: Object) =&gt; any
</code></pre>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1160">
                            <td data-reactid="1161">onToggle</td>
                            <td data-reactid="1164">
                                <div data-reactid="1165">
                                    function
                                </div></td>
                            <td data-reactid="1166"></td>
                            <td data-reactid="1167">
                                <div class="prop-desc-heading" data-reactid="1168">
                                    <small data-reactid="1169"><em class="text-info" data-reactid="1170"><span class="glyphicon glyphicon-info-sign" data-reactid="1171"></span>
                                        &nbsp;
                                        <span data-reactid="1173">controls<code data-reactid="1175">open</code></span></em></small>
                                </div>
                                <div class="prop-desc" data-reactid="1176">
                                    <p>A callback fired when the Dropdown wishes to change visibility. Called with the requested <code>open</code> value, the DOM event, and the source that fired it: <code>'click'</code>,<code>'keydown'</code>,<code>'rootClose'</code>, or <code>'select'</code>.</p>
                                    <pre><code class="lang-js">function(Boolean isOpen, Object event, ｛ String source ｝ {}
</code></pre>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1177">
                            <td data-reactid="1178">open</td>
                            <td data-reactid="1181">
                                <div data-reactid="1182">
                                    boolean
                                </div></td>
                            <td data-reactid="1183"></td>
                            <td data-reactid="1184">
                                <div class="prop-desc-heading" data-reactid="1185">
                                    <small data-reactid="1186"><em class="text-info" data-reactid="1187"><span class="glyphicon glyphicon-info-sign" data-reactid="1188"></span>
                                        &nbsp;
                                        <span data-reactid="1190">controlled by:<code data-reactid="1192">onToggle</code>
                                            , initial prop:
                                            <code data-reactid="1194">defaultOpen</code></span></em></small>
                                </div>
                                <div class="prop-desc" data-reactid="1195">
                                    <p>Whether or not the Dropdown is visible.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1196">
                            <td data-reactid="1197">pullRight</td>
                            <td data-reactid="1200">
                                <div data-reactid="1201">
                                    boolean
                                </div></td>
                            <td data-reactid="1202"></td>
                            <td data-reactid="1203">
                                <div class="prop-desc" data-reactid="1204">
                                    <p>Align the menu to the right side of the Dropdown toggle</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1205">
                            <td data-reactid="1206">role</td>
                            <td data-reactid="1209">
                                <div data-reactid="1210">
                                    string
                                </div></td>
                            <td data-reactid="1211"></td>
                            <td data-reactid="1212">
                                <div class="prop-desc" data-reactid="1213">
                                    <p>If <code>'menuitem'</code>, causes the dropdown to behave like a menu item rather than a menu button.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1214">
                            <td data-reactid="1215">rootCloseEvent</td>
                            <td data-reactid="1218">
                                <div data-reactid="1219">
       <span data-reactid="1220">
        one of:<code data-reactid="1222">'click'</code><span data-reactid="1223">, </span><code data-reactid="1224">'mousedown'</code></span>
                                </div></td>
                            <td data-reactid="1225"></td>
                            <td data-reactid="1226">
                                <div class="prop-desc" data-reactid="1227">
                                    <p>Which event when fired outside the component will cause it to be closed</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1228">
                            <td data-reactid="1229">title<span class="label label-default" data-reactid="1232">required</span></td>
                            <td data-reactid="1233">
                                <div data-reactid="1234">
                                    node
                                </div></td>
                            <td data-reactid="1235"></td>
                            <td data-reactid="1236">
                                <div class="prop-desc" data-reactid="1237"></div></td>
                        </tr>
                        </tbody>
                    </Table>
                    </Tab>

                <Tab eventKey={2} title="SplitButton">

                <Table class="prop-table table table-striped table-bordered" data-reactid="1242">
                    <thead data-reactid="1243">
                    <tr data-reactid="1244">
                        <th data-reactid="1245">Name</th>
                        <th data-reactid="1246">Type</th>
                        <th data-reactid="1247">Default</th>
                        <th data-reactid="1248">Description</th>
                    </tr>
                    </thead>
                    <tbody data-reactid="1249">
                    <tr class="prop-table-row" data-reactid="1250">
                        <td data-reactid="1251">
                            bsSize


                        </td>
                        <td data-reactid="1254">
                            <div data-reactid="1255">
                                string
                            </div></td>
                        <td data-reactid="1256"></td>
                        <td data-reactid="1257">
                            <div class="prop-desc" data-reactid="1258">
                                <p>Component size variations.</p>
                            </div></td>
                    </tr>
                    <tr class="prop-table-row" data-reactid="1259">
                        <td data-reactid="1260">
                            bsStyle


                        </td>
                        <td data-reactid="1263">
                            <div data-reactid="1264">
                                string
                            </div></td>
                        <td data-reactid="1265"></td>
                        <td data-reactid="1266">
                            <div class="prop-desc" data-reactid="1267">
                                <p>Component visual or contextual style variants.</p>
                            </div></td>
                    </tr>
                    <tr class="prop-table-row" data-reactid="1268">
                        <td data-reactid="1269">
                            componentClass


                        </td>
                        <td data-reactid="1272">
                            <div data-reactid="1273">
                                elementType
                            </div></td>
                        <td data-reactid="1274">ButtonGroup</td>
                        <td data-reactid="1275">
                            <div class="prop-desc" data-reactid="1276">
                                <p>You can use a custom element type for this component.</p>
                            </div></td>
                    </tr>
                    <tr class="prop-table-row" data-reactid="1277">
                        <td data-reactid="1278">
                            disabled


                        </td>
                        <td data-reactid="1281">
                            <div data-reactid="1282">
                                boolean
                            </div></td>
                        <td data-reactid="1283"></td>
                        <td data-reactid="1284">
                            <div class="prop-desc" data-reactid="1285">
                                <p>Whether or not component is disabled.</p>
                            </div></td>
                    </tr>
                    <tr class="prop-table-row" data-reactid="1286">
                        <td data-reactid="1287">
                            dropup


                        </td>
                        <td data-reactid="1290">
                            <div data-reactid="1291">
                                boolean
                            </div></td>
                        <td data-reactid="1292"></td>
                        <td data-reactid="1293">
                            <div class="prop-desc" data-reactid="1294">
                                <p>The menu will open above the dropdown button, instead of below it.</p>
                            </div></td>
                    </tr>
                    <tr class="prop-table-row" data-reactid="1295">
                        <td data-reactid="1296">
                            href


                        </td>
                        <td data-reactid="1299">
                            <div data-reactid="1300">
                                string
                            </div></td>
                        <td data-reactid="1301"></td>
                        <td data-reactid="1302">
                            <div class="prop-desc" data-reactid="1303"></div></td>
                    </tr>
                    <tr class="prop-table-row" data-reactid="1304">
                        <td data-reactid="1305">
                            id


                            <span class="label label-default" data-reactid="1308">required</span></td>
                        <td data-reactid="1309">
                            <div data-reactid="1310">
                                string|number
                            </div></td>
                        <td data-reactid="1311"></td>
                        <td data-reactid="1312">
                            <div class="prop-desc" data-reactid="1313">
                                <p>An html id attribute, necessary for assistive technologies, such as screen readers.</p>
                            </div></td>
                    </tr>
                    <tr class="prop-table-row" data-reactid="1314">
                        <td data-reactid="1315">
                            onClick


                        </td>
                        <td data-reactid="1318">
                            <div data-reactid="1319">
                                function
                            </div></td>
                        <td data-reactid="1320"></td>
                        <td data-reactid="1321">
                            <div class="prop-desc" data-reactid="1322"></div></td>
                    </tr>
                    <tr class="prop-table-row" data-reactid="1323">
                        <td data-reactid="1324">
                            onClose


                        </td>
                        <td data-reactid="1327">
                            <div data-reactid="1328">
                                function
                            </div></td>
                        <td data-reactid="1329"></td>
                        <td data-reactid="1330">
                            <div class="prop-desc" data-reactid="1331">
                                <p>A callback fired when the Dropdown closes.</p>
                            </div></td>
                    </tr>
                    <tr class="prop-table-row" data-reactid="1332">
                        <td data-reactid="1333">
                            onSelect


                        </td>
                        <td data-reactid="1336">
                            <div data-reactid="1337">
                                function
                            </div></td>
                        <td data-reactid="1338"></td>
                        <td data-reactid="1339">
                            <div class="prop-desc" data-reactid="1340">
                                <p>A callback fired when a menu item is selected.</p>
                                <pre><code class="lang-js">(eventKey: any, event: Object) =&gt; any
</code></pre>
                            </div></td>
                    </tr>
                    <tr class="prop-table-row" data-reactid="1341">
                        <td data-reactid="1342">
                            onToggle


                        </td>
                        <td data-reactid="1345">
                            <div data-reactid="1346">
                                function
                            </div></td>
                        <td data-reactid="1347"></td>
                        <td data-reactid="1348">
                            <div class="prop-desc-heading" data-reactid="1349">
                                <small data-reactid="1350"><em class="text-info" data-reactid="1351"><span class="glyphicon glyphicon-info-sign" data-reactid="1352"></span>
                                    &nbsp;
                                    <span data-reactid="1354">controls
          <code data-reactid="1356">open</code></span></em></small>
                            </div>
                            <div class="prop-desc" data-reactid="1357">
                                <p>A callback fired when the Dropdown wishes to change visibility. Called with the requested <code>open</code> value, the DOM event, and the source that fired it: <code>'click'</code>,<code>'keydown'</code>,<code>'rootClose'</code>, or <code>'select'</code>.</p>
                                <pre><code class="lang-js">function(Boolean isOpen, Object event, ｛ String source ｝) ｛｝
</code></pre>
                            </div></td>
                    </tr>
                    <tr class="prop-table-row" data-reactid="1358">
                        <td data-reactid="1359">
                            open


                        </td>
                        <td data-reactid="1362">
                            <div data-reactid="1363">
                                boolean
                            </div></td>
                        <td data-reactid="1364"></td>
                        <td data-reactid="1365">
                            <div class="prop-desc-heading" data-reactid="1366">
                                <small data-reactid="1367"><em class="text-info" data-reactid="1368"><span class="glyphicon glyphicon-info-sign" data-reactid="1369"></span>
                                    &nbsp;
                                    <span data-reactid="1371">
          controlled by:
          <code data-reactid="1373">onToggle</code>
          , initial prop:
          <code data-reactid="1375">defaultOpen</code></span></em></small>
                            </div>
                            <div class="prop-desc" data-reactid="1376">
                                <p>Whether or not the Dropdown is visible.</p>
                            </div></td>
                    </tr>
                    <tr class="prop-table-row" data-reactid="1377">
                        <td data-reactid="1378">
                            pullRight


                        </td>
                        <td data-reactid="1381">
                            <div data-reactid="1382">
                                boolean
                            </div></td>
                        <td data-reactid="1383"></td>
                        <td data-reactid="1384">
                            <div class="prop-desc" data-reactid="1385">
                                <p>Align the menu to the right side of the Dropdown toggle</p>
                            </div></td>
                    </tr>
                    <tr class="prop-table-row" data-reactid="1386">
                        <td data-reactid="1387">
                            role


                        </td>
                        <td data-reactid="1390">
                            <div data-reactid="1391">
                                string
                            </div></td>
                        <td data-reactid="1392"></td>
                        <td data-reactid="1393">
                            <div class="prop-desc" data-reactid="1394">
                                <p>If <code>'menuitem'</code>, causes the dropdown to behave like a menu item rather than a menu button.</p>
                            </div></td>
                    </tr>
                    <tr class="prop-table-row" data-reactid="1395">
                        <td data-reactid="1396">
                            rootCloseEvent


                        </td>
                        <td data-reactid="1399">
                            <div data-reactid="1400">
       <span data-reactid="1401">
        one of:
        <code data-reactid="1403">'click'</code><span data-reactid="1404">, </span><code data-reactid="1405">'mousedown'</code></span>
                            </div></td>
                        <td data-reactid="1406"></td>
                        <td data-reactid="1407">
                            <div class="prop-desc" data-reactid="1408">
                                <p>Which event when fired outside the component will cause it to be closed</p>
                            </div></td>
                    </tr>
                    <tr class="prop-table-row" data-reactid="1409">
                        <td data-reactid="1410">
                            title


                            <span class="label label-default" data-reactid="1413">required</span></td>
                        <td data-reactid="1414">
                            <div data-reactid="1415">
                                node
                            </div></td>
                        <td data-reactid="1416"></td>
                        <td data-reactid="1417">
                            <div class="prop-desc" data-reactid="1418">
                                <p>The content of the split button.</p>
                            </div></td>
                    </tr>
                    <tr class="prop-table-row" data-reactid="1419">
                        <td data-reactid="1420">
                            toggleLabel


                        </td>
                        <td data-reactid="1423">
                            <div data-reactid="1424">
                                string
                            </div></td>
                        <td data-reactid="1425"></td>
                        <td data-reactid="1426">
                            <div class="prop-desc" data-reactid="1427">
                                <p>Accessible label for the toggle; the value of <code>title</code> if not specified.</p>
                            </div></td>
                    </tr>
                    </tbody>
                </Table>
                </Tab>
                    <Tab  eventKey={3} title="Dropdown">
                    <Table class="prop-table table table-striped table-bordered" data-reactid="1432">
                        <thead data-reactid="1433">
                        <tr data-reactid="1434">
                            <th data-reactid="1435">Name</th>
                            <th data-reactid="1436">Type</th>
                            <th data-reactid="1437">Default</th>
                            <th data-reactid="1438">Description</th>
                        </tr>
                        </thead>
                        <tbody data-reactid="1439">
                        <tr class="prop-table-row" data-reactid="1440">
                            <td data-reactid="1441">
                                children


                            </td>
                            <td data-reactid="1444">
                                <div data-reactid="1445">
                                    node
                                </div></td>
                            <td data-reactid="1446"></td>
                            <td data-reactid="1447">
                                <div class="prop-desc" data-reactid="1448">
                                    <p>The children of a Dropdown may be a <code>&lt;Dropdown.Toggle&gt;</code> or a <code>&lt;Dropdown.Menu&gt;</code>.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1449">
                            <td data-reactid="1450">
                                componentClass


                            </td>
                            <td data-reactid="1453">
                                <div data-reactid="1454">
                                    elementType
                                </div></td>
                            <td data-reactid="1455">ButtonGroup</td>
                            <td data-reactid="1456">
                                <div class="prop-desc" data-reactid="1457">
                                    <p>You can use a custom element type for this component.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1458">
                            <td data-reactid="1459">
                                disabled


                            </td>
                            <td data-reactid="1462">
                                <div data-reactid="1463">
                                    boolean
                                </div></td>
                            <td data-reactid="1464"></td>
                            <td data-reactid="1465">
                                <div class="prop-desc" data-reactid="1466">
                                    <p>Whether or not component is disabled.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1467">
                            <td data-reactid="1468">
                                dropup


                            </td>
                            <td data-reactid="1471">
                                <div data-reactid="1472">
                                    boolean
                                </div></td>
                            <td data-reactid="1473"></td>
                            <td data-reactid="1474">
                                <div class="prop-desc" data-reactid="1475">
                                    <p>The menu will open above the dropdown button, instead of below it.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1476">
                            <td data-reactid="1477">
                                id


                                <span class="label label-default" data-reactid="1480">required</span></td>
                            <td data-reactid="1481">
                                <div data-reactid="1482">
                                    string|number
                                </div></td>
                            <td data-reactid="1483"></td>
                            <td data-reactid="1484">
                                <div class="prop-desc" data-reactid="1485">
                                    <p>An html id attribute, necessary for assistive technologies, such as screen readers.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1486">
                            <td data-reactid="1487">
                                onClose


                            </td>
                            <td data-reactid="1490">
                                <div data-reactid="1491">
                                    function
                                </div></td>
                            <td data-reactid="1492"></td>
                            <td data-reactid="1493">
                                <div class="prop-desc" data-reactid="1494">
                                    <p>A callback fired when the Dropdown closes.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1495">
                            <td data-reactid="1496">
                                onSelect


                            </td>
                            <td data-reactid="1499">
                                <div data-reactid="1500">
                                    function
                                </div></td>
                            <td data-reactid="1501"></td>
                            <td data-reactid="1502">
                                <div class="prop-desc" data-reactid="1503">
                                    <p>A callback fired when a menu item is selected.</p>
                                    <pre><code class="lang-js">(eventKey: any, event: Object) =&gt; any
</code></pre>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1504">
                            <td data-reactid="1505">
                                onToggle


                            </td>
                            <td data-reactid="1508">
                                <div data-reactid="1509">
                                    function
                                </div></td>
                            <td data-reactid="1510"></td>
                            <td data-reactid="1511">
                                <div class="prop-desc-heading" data-reactid="1512">
                                    <small data-reactid="1513"><em class="text-info" data-reactid="1514"><span class="glyphicon glyphicon-info-sign" data-reactid="1515"></span>
                                        &nbsp;
                                        <span data-reactid="1517">
          controls
          <code data-reactid="1519">open</code></span></em></small>
                                </div>
                                <div class="prop-desc" data-reactid="1520">
                                    <p>A callback fired when the Dropdown wishes to change visibility. Called with the requested <code>open</code> value, the DOM event, and the source that fired it: <code>'click'</code>,<code>'keydown'</code>,<code>'rootClose'</code>, or <code>'select'</code>.</p>
                                    <pre><code class="lang-js">function(Boolean isOpen, Object event,｛ String source ｝) ｛｝
</code></pre>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1521">
                            <td data-reactid="1522">
                                open


                            </td>
                            <td data-reactid="1525">
                                <div data-reactid="1526">
                                    boolean
                                </div></td>
                            <td data-reactid="1527"></td>
                            <td data-reactid="1528">
                                <div class="prop-desc-heading" data-reactid="1529">
                                    <small data-reactid="1530"><em class="text-info" data-reactid="1531"><span class="glyphicon glyphicon-info-sign" data-reactid="1532"></span>
                                        &nbsp;
                                        <span data-reactid="1534">
          controlled by:
          <code data-reactid="1536">onToggle</code>
          , initial prop:
          <code data-reactid="1538">defaultOpen</code></span></em></small>
                                </div>
                                <div class="prop-desc" data-reactid="1539">
                                    <p>Whether or not the Dropdown is visible.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1540">
                            <td data-reactid="1541">
                                pullRight


                            </td>
                            <td data-reactid="1544">
                                <div data-reactid="1545">
                                    boolean
                                </div></td>
                            <td data-reactid="1546"></td>
                            <td data-reactid="1547">
                                <div class="prop-desc" data-reactid="1548">
                                    <p>Align the menu to the right side of the Dropdown toggle</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1549">
                            <td data-reactid="1550">
                                role


                            </td>
                            <td data-reactid="1553">
                                <div data-reactid="1554">
                                    string
                                </div></td>
                            <td data-reactid="1555"></td>
                            <td data-reactid="1556">
                                <div class="prop-desc" data-reactid="1557">
                                    <p>If <code>'menuitem'</code>, causes the dropdown to behave like a menu item rather than a menu button.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1558">
                            <td data-reactid="1559">
                                rootCloseEvent


                            </td>
                            <td data-reactid="1562">
                                <div data-reactid="1563">
       <span data-reactid="1564">
        one of:
        <code data-reactid="1566">'click'</code><span data-reactid="1567">, </span><code data-reactid="1568">'mousedown'</code></span>
                                </div></td>
                            <td data-reactid="1569"></td>
                            <td data-reactid="1570">
                                <div class="prop-desc" data-reactid="1571">
                                    <p>Which event when fired outside the component will cause it to be closed</p>
                                </div></td>
                        </tr>
                        </tbody>
                    </Table>
                    </Tab>
                    </Tabs>
                </div>
            </div>
        );
    }
}